<!--选择机构-->
<template>
  <article ref="dialogWrap" class="dialog-wrap" v-if="isShow">
    <div class="head-wrap">
      <div class="header">
        <div @click="back()" class="back"><span class="arrow"></span></div>
        <div class="title">{{headTitle}}</div>
        <div class="btn">
          <div class="inner">
            <slot name="btn"></slot>
          </div>
        </div>
      </div>
    </div>
    <section class="frame-content-sub no-bg">
      <section class="inner-content pdv-9 pdh-4">

        <div v-for="(item,index) in list" @click="select(item)" class="item block">
          <div class="icon">
            <span class="icon-text">计</span>
          </div>
          <div class="text-wrap">
            <div class="title"><span class="pdr-2">{{item.trainingclass}}</span>
              <span class="status" :class="rendClass(item.type)">{{status[item.type]}}</span>
            </div>
            <div class="tip">
              <span>辅导师：黄小明</span><span>{{tools.formateYearSecond(item.createTime)}}</span><span>人数：{{item.number}}</span>
            </div>
          </div>
        </div>


        <div class="pdv-3"></div>

        <div class="pdv-3"></div>

      </section>
    </section>
  </article>
</template>

<script>
  import moment from 'moment'
  import _ from 'lodash'
  let currYear = new Date().getFullYear()
  const dateSegmentData = [
    {
      is: 'cube-date-picker',
      title: '开始时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    },
    {
      is: 'cube-date-picker',
      title: '结束时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    }
  ]
  export default {
    name: 'selectSchool',
    data () {
      return {
        headTitle: '添加课程表',
        isShow: !false,
        list: []
      }
    },
    mounted () {
      this.groupQueryList()
      this.dateSegmentPicker = this.$createSegmentPicker({
        data: dateSegmentData,
        onSelect: (selectedDates, selectedVals, selectedTexts) => {
          this.time = this.tools.formateYearSecond(selectedTexts[0]) + ' - ' + this.tools.formateYearSecond(selectedTexts[1])
        },
        onNext: (i, selectedDate, selectedValue, selectedText) => {
          dateSegmentData[1].min = selectedDate
          if (i === 0) {
            this.dateSegmentPicker.$updateProps({
              data: dateSegmentData
            })
          }
        }
      })
    },
    methods: {
      select (item) {
        this.$emit('onSelect', item)
        this.back()
      },
      show () {
        this.isShow = true
      },
      back () {
        this.isShow = false
      },
      showDateSegmentPicker() {
        this.dateSegmentPicker.show()
      },
      showTimePicker () {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createTimePicker({
            min: new Date(),
            max: new Date(2030, 12, 31),
            value: new Date(),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.startTime = moment(selectedTime).format('YYYY-MM-DD hh:mm')
              this.computeClassHour()
            }
          })
        }
        this.datePicker.show()
      },
      showEndTimePicker () {
        if (!this.endDatePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.endDatePicker = this.$createTimePicker({
            min: moment(this.startTime).valueOf(),
            max: new Date(2030, 12, 31),
            value: moment(this.startTime).add(1, 'days').valueOf(),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.endTime = moment(selectedTime).format('YYYY-MM-DD hh:mm')
              this.computeClassHour()
            }
          })
        }
        this.endDatePicker.show()
      },
      computeClassHour () {
        if (this.startTime || this.endTime) {
          return false
        }
        this.classForm.classHour = (new Date(this.endTime).getTime() - new Date(this.startTime).getTime()) / 1000 / 60 / 60
      },
      // 获取培训机构
      groupQueryList () {
        let params = {
          dimId: 4,
          depth: 1
        }
        this.fetchService.groupQueryList(params).then(res => {
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.trainSchoolList = res.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
